.custom_keyboard {
    display: flex;
    flex-direction: column;
    border-top: 1rpx solid #e6e6e6;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    transform: translateY(100%);
    transition: all .5s cubic-bezier(0, 1, 0.5, 1);
    z-index: 999;
  }
  
  .custom_keyboard.show {
    transform: translateY(0%);
  }
  
  .custom_keyboard.hide {
    transform: translateY(100%);
  }
  
  .custom_keyboard .toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 15rpx 10rpx;
    color: #05aeff;
    background-color: #ffffff;
  }
  
  .custom_keyboard .keyboard {
    background-color: #d1d4db;
    display: flex;
    flex-direction: column;
    padding: 40rpx 10rpx;
  }
  
  .custom_keyboard .keyboard .row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 20rpx;
  }
  
  .custom_keyboard .keyboard .row:last-child {
    margin-bottom: 0;
  }
  
  .custom_keyboard .keyboard .row .col {
    width: 65rpx;
    height: 84rpx;
    line-height: 84rpx;
    text-align: center;
    background-color: #ffffff;
    border-radius: 10rpx;
    margin-right: 15rpx;
    box-shadow: 0rpx 6rpx 5rpx #888888;
  }
  
  .custom_keyboard .keyboard .row .col:last-child {
    margin-right: 0;
  }
  
  .custom_keyboard .keyboard .row .col:active {
    box-shadow: 0rpx 0rpx 0rpx #888888;
  }
  
  
  .custom_keyboard .keyboard .row .col.disabled {
    color: #c6c6c8;
  }
  
  .custom_keyboard .keyboard .row .col.empty {
    background-color: transparent;
    box-shadow: unset;
  }
  
  .custom_keyboard .keyboard .row .col.backspace {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .custom_keyboard .keyboard .row .col.backspace .icon {
    width: 42rpx;
    height: 28rpx;
  }
  
  .custom_keyboard .footer {
    height: env(safe-area-inset-bottom);
    background-color: #d1d4db;
  }